<script lang="ts">
import { h, defineComponent } from 'vue';
import { ElPagination } from 'element-plus';
import PrevIcon from './pagination-prev-icon.vue';
import NextIcon from './pagination-next-icon.vue';

export default defineComponent({
  props: {
    total: { type: Number, default: 0 },
    pageSize: { type: Number, default: 10 },
    currentPage: { type: Number, default: 10 },
    pagerCount: { type: Number, default: 5 },
    pageSizes: {
      type: Array,
      default: () => {
        return [10, 20, 50, 100];
      }
    },
    layout: { type: String, default: 'total,slot,prev,pager,next,sizes,jumper' }
  },
  emits: ['page-change'],
  methods: {},
  render() {
    const paginationData: any = {
      ref: 'pagination',
      layout: this.layout,
      pagerCount: this.pagerCount,
      pageSizes: this.pageSizes,
      prevIcon: PrevIcon,
      nextIcon: NextIcon,
      'onUpdate:current-page': (p: number) => {
        this.$emit('page-change', p);
      },
      ...this.$attrs
    };
    paginationData.currentPage = this.currentPage;
    paginationData.pageSize = this.pageSize;
    paginationData.total = this.total;
    return h('div', { class: 'k-pagination' }, [h(ElPagination, paginationData, () => `每页${this.pageSize}条`)]);
  }
});
</script>

<style lang="scss">
.k-pagination {
  display: flex;
  justify-content: center;
  margin-top: 24px;

  .el-pagination {
    font-family: 'PingFang SC', sans-serif;
    font-size: 12px;

    .btn-prev {
      margin-left: 12px;
    }

    .btn-next {
      margin-right: 12px;
    }

    button {
      width: 36px;
      height: 36px;
    }

    .el-pagination__sizes {
      margin-left: 0;
    }

    .el-pagination__goto {
      margin-right: 12px;
    }

    .el-pagination__total {
      margin-right: 12px;
    }
  }

  .el-pager {
    font-size: 14px;

    .number {
      width: 36px;
      height: 36px;
      margin-left: 8px;
      font-family: 'PingFang SC', sans-serif;
      font-weight: 400;
      border-radius: 2px;

      &.is-active {
        font-weight: 500;
        color: #4975e9;
        background: #edf1fd;
      }
    }
  }

  .el-input__wrapper {
    flex-grow: unset;
    font-size: 12px;
    background: #f7f7f8;
    border-radius: 2px;
    box-shadow: none;
  }

  .el-pagination__editor {
    .el-input__wrapper {
      width: 40px;
      height: 28px;
      padding: 0;
    }
  }

  .el-pagination__classifier {
    display: none;
  }
}
</style>
